<template>
    <div class="custom-query-wrapper" >
      <!--  ag-theme-quartz-->
        <!--       :gridOptions="gridOptions" -->
      <ag-grid-vue
        style="width: '100%'; height: '100%';"
        class="ag-theme-quartz"
        :columnDefs="columnDefs"
        :rowData="rowData"
        :gridApi="gridApi"
        :gridOptions="gridOptions"
        :locale-text="localeText"
      >
      </ag-grid-vue>
    </div>
  </template>
    
    <script>
  import "ag-grid-community/styles/ag-grid.css";
  import "ag-grid-community/styles/ag-theme-quartz.css";
  // npm install @ag-grid-community/core @ag-grid-community/locale --save
  import { AG_GRID_LOCALE_CN } from "@ag-grid-community/locale";
  import { AgGridVue } from "ag-grid-vue";
  
  export default {
    name: "ag-grid-table",
    props: {
      // 定义一个名为 rawLeftTableData 的 prop，类型为 Array
      rowData: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        columnDefs: [],
        localeText: {},
        gridApi: null,
        gridOptions: {
          domLayout: 'autoHeight', // 启用自动高度
        },
      };
    },
    components: {
      AgGridVue,
    },
    mounted() {
      this.initGrid();
      this.localeText = AG_GRID_LOCALE_CN;
    },
    methods: {
      checkTime(str)
      {
       const regex = /时间|time/;
        return regex.test(str);
      },
      checkNumber(str)
      {
       const regex = /销量|sale|销售额/;
        return regex.test(str);
      },
      initGrid() {
        // 字段名到中文表头的映射关系
        const headerMapping = {
          cust_segment: "客户分档",
          cust_id: "客户编号",
          licence_no: "许可证编号",
          store_name: "店铺名称",
          county_id: "县编号",
          market_id: "市场编号",
          artificial_person: "法人",
          created_time: "创建时间",
          periods: "周期",
          sales_volume: "销售额",
          brand_name: "雪茄品牌",
          overnight_shop: "是否夜店",
          cust_name:"客户姓名",
          licence_address:"客户地址",
          manager_id:"客户经理编号",
          multiple_shop:"是否连锁",
      
        };
        const keys = Object.keys(this.rowData[0]);
        this.columnDefs = keys.map((key) => {
          const columnDef = {
            field: key,
            width:150,
            headerName: headerMapping[key],
            filter: this.checkTime(key)
              ? "agDateColumnFilter"
              : this.checkNumber(key)
              ? "agNumberColumnFilter"
              : "agTextColumnFilter",
            filterParams: {
              comparator: (filterValue, cellValue) => {
                if (this.checkNumber(key)) {
                  const numFilterValue = String(filterValue);
                  const numCellValue = String(cellValue);
                  console.log("6666");
                  return numFilterValue === numCellValue;
                }
                return filterValue === cellValue; // 默认的字符串比较
              },
            },
          };
      
          if (this.checkNumber(key)) {
            columnDef.filterParams.comparator = (filterValue, cellValue) => {
              const numFilterValue = parseFloat(filterValue);
              const numCellValue = parseFloat(cellValue);
              console.log(
                `Comparing filterValue: ${numFilterValue} with cellValue: ${numCellValue}`
              ); // 调试信息
              return numFilterValue === numCellValue;
            };
          }
          return columnDef;
        });
      },
    },
  };
  </script>
  <style scoped>
  .custom-query-wrapper {
    width:700px;
    /* height: 700px; */
    min-width: 400px;
    /* min-height: 100px; 设置最小高度 */
    
  }
  /* 内容部原始样式 */
  ::v-deep .ag-aria-description-container {
    display: none !important;
  }
  </style>